<!DOCTYPE html>
<html lang="zh-CN">
	<head>
		<meta charset="UTF-8">
		<meta name="viewport" content="width=device-width, initial-scale=1.0">
		<title>MPU6050模拟器 - 立方体姿态控制</title>
		<script typet="text/javascript" src="http://code.jquery.com/jquery-latest.js"></script>
		<script src="https://cdnjs.cloudflare.com/ajax/libs/three.js/r128/three.min.js"></script>
		<script src="https://cdnjs.cloudflare.com/ajax/libs/dat-gui/0.7.7/dat.gui.min.js"></script>
		<style>
			* {
				margin: 0;
				padding: 0;
				box-sizing: border-box;
				font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
			}

			body {
				background: linear-gradient(135deg, #0f3460, #1a1a2e, #16213e);
				color: white;
				min-height: 100vh;
				overflow-x: hidden;
				padding: 20px;
			}

			.container {
				max-width: 1400px;
				margin: 0 auto;
				display: grid;
				grid-template-columns: 1fr 400px;
				gap: 20px;
				height: calc(100vh - 40px);
			}

			header {
				grid-column: 1 / -1;
				text-align: center;
				/* padding: 20px 0; */
				background: rgba(0, 0, 0, 0.3);
				border-radius: 15px;
				margin-bottom: 10px;
				backdrop-filter: blur(4px);
				border: 1px solid rgba(255, 255, 255, 0.1);
				box-shadow: 0 8px 32px rgba(0, 0, 0, 0.3);
			}

			h1 {
				font-size: 2.5rem;
				margin-bottom: 10px;
				background: linear-gradient(90deg, #00c9ff, #92fe9d);
				-webkit-background-clip: text;
				-webkit-text-fill-color: transparent;
				text-shadow: 0 2px 10px rgba(0, 0, 0, 0.2);
			}

			.subtitle {
				font-size: 1.1rem;
				opacity: 0.85;
				max-width: 800px;
				margin: 0 auto;
				line-height: 1.6;
			}

			.scene-container {
				background: rgba(0, 0, 0, 0.3);
				border-radius: 15px;
				overflow: hidden;
				position: relative;
				box-shadow: 0 10px 30px rgba(0, 0, 0, 0.3);
				backdrop-filter: blur(10px);
				border: 1px solid rgba(255, 255, 255, 0.1);
			}

			#scene {
				width: 100%;
				height: 100%;
				background: rgba(0, 0, 0, 0.3);
			}

			.control-panel {
				background: rgba(0, 0, 0, 0.3);
				border-radius: 15px;
				padding: 20px;
				display: flex;
				flex-direction: column;
				gap: 20px;
				box-shadow: 0 10px 30px rgba(0, 0, 0, 0.3);
				backdrop-filter: blur(10px);
				border: 1px solid rgba(255, 255, 255, 0.1);
				overflow-y: auto;
			}

			.control-panel::-webkit-scrollbar {
				width: 5px;
			}

			.control-panel::-webkit-scrollbar-track {
				background: rgba(255, 255, 255, 0.05);
				border-radius: 5px;
			}

			.control-panel::-webkit-scrollbar-thumb {
				background: #192942;
				border-radius: 5px;
			}



			.panel-section {
				background: rgba(0, 0, 0, 0.2);
				border-radius: 10px;
				padding: 20px;
				border: 1px solid rgba(255, 255, 255, 0.1);
			}

			h2 {
				font-size: 1.4rem;
				margin-bottom: 15px;
				color: #00c9ff;
				display: flex;
				align-items: center;
				padding-bottom: 10px;
				border-bottom: 1px solid rgba(255, 255, 255, 0.1);
			}

			h2 i {
				margin-right: 10px;
				font-size: 1.2em;
			}

			.sensor-data {
				display: grid;
				grid-template-columns: 1fr 1fr;
				gap: 15px;
			}

			.data-item {
				background: rgba(0, 0, 0, 0.3);
				border-radius: 8px;
				padding: 15px;
				text-align: center;
				transition: transform 0.3s ease, box-shadow 0.3s ease;
			}

			.data-item:hover {
				transform: translateY(-3px);
				box-shadow: 0 5px 15px rgba(0, 201, 255, 0.2);
			}

			.data-label {
				font-size: 0.9rem;
				opacity: 0.8;
				margin-bottom: 8px;
				display: flex;
				align-items: center;
				justify-content: center;
			}

			.data-value {
				font-size: 1.6rem;
				font-weight: bold;
				color: #92fe9d;
			}

			.sensor-controls {
				display: grid;
				grid-template-columns: 1fr 1fr;
				gap: 15px;
			}

			.control-group {
				background: rgba(0, 0, 0, 0.2);
				border-radius: 8px;
				padding: 15px;
			}

			.slider-container {
				margin: 15px 0;
			}

			.slider-label {
				display: flex;
				justify-content: space-between;
				margin-bottom: 5px;
				font-size: 0.95rem;
			}

			input[type="range"] {
				width: 100%;
				height: 8px;
				border-radius: 4px;
				background: rgba(255, 255, 255, 0.1);
				outline: none;
				-webkit-appearance: none;
			}

			input[type="range"]::-webkit-slider-thumb {
				-webkit-appearance: none;
				width: 20px;
				height: 20px;
				border-radius: 50%;
				background: #00c9ff;
				cursor: pointer;
				box-shadow: 0 0 10px rgba(0, 201, 255, 0.7);
				transition: all 0.2s ease;
			}

			input[type="range"]::-webkit-slider-thumb:hover {
				transform: scale(1.2);
				box-shadow: 0 0 15px rgba(0, 201, 255, 1);
			}

			.controls {
				display: grid;
				grid-template-columns: 1fr 1fr;
				gap: 10px;
				margin-top: 10px;
			}

			button {
				padding: 12px;
				border: none;
				border-radius: 8px;
				background: linear-gradient(90deg, #00c9ff, #92fe9d);
				color: #1a1a2e;
				font-weight: bold;
				cursor: pointer;
				transition: all 0.3s ease;
				font-size: 1rem;
				box-shadow: 0 4px 10px rgba(0, 0, 0, 0.2);
			}

			button:hover {
				transform: translateY(-3px);
				box-shadow: 0 7px 15px rgba(0, 0, 0, 0.3);
			}

			button:active {
				transform: translateY(1px);
			}

			.sensor-visualization {
				height: 200px;
				position: relative;
				background: rgba(0, 0, 0, 0.2);
				border-radius: 10px;
				overflow: hidden;
			}

			.visualization-title {
				position: absolute;
				top: 10px;
				left: 10px;
				font-size: 0.9rem;
				opacity: 0.8;
				z-index: 10;
			}

			#sensor-3d {
				width: 100%;
				height: 100%;
			}

			.explanation {
				line-height: 1.6;
				font-size: 0.95rem;
			}

			.explanation p {
				margin-bottom: 12px;
			}

			.highlight {
				color: #00c9ff;
				font-weight: 500;
			}

			.formula {
				background: rgba(0, 0, 0, 0.3);
				border-radius: 5px;
				padding: 10px;
				margin: 10px 0;
				font-family: monospace;
				font-size: 0.9rem;
			}

			.footer {
				grid-column: 1 / -1;
				text-align: center;
				padding: 15px;
				margin-top: 10px;
				background: rgba(0, 0, 0, 0.3);
				border-radius: 10px;
				font-size: 0.9rem;
				opacity: 0.7;
			}

			@media (max-width: 1000px) {
				.container {
					grid-template-columns: 1fr;
					grid-template-rows: auto 1fr auto;
					height: auto;
				}

				.scene-container {
					height: 60vh;
				}

				.control-panel {
					height: auto;
				}

				.sensor-controls {
					grid-template-columns: 1fr;
				}
			}
		</style>
	</head>
	<body>
		<div class="container">
			<header>
				<h1>物品姿态监测</h1>
			</header>

			<div class="scene-container">
				<div id="scene"></div>
			</div>

			<div class="control-panel">
				<div class="panel-section">
					<h2>📊 传感器数据</h2>
					<div class="sensor-data">
						<div class="data-item">
							<div class="data-label">加速度 X</div>
							<div class="data-value" id="accel-x">0.00 g</div>
						</div>
						<div class="data-item">
							<div class="data-label">加速度 Y</div>
							<div class="data-value" id="accel-y">0.00 g</div>
						</div>
						<div class="data-item">
							<div class="data-label">加速度 Z</div>
							<div class="data-value" id="accel-z">1.00 g</div>
						</div>
						<div class="data-item">
							<div class="data-label">角速度 X</div>
							<div class="data-value" id="gyro-x">0.00 °/s</div>
						</div>
						<div class="data-item">
							<div class="data-label">角速度 Y</div>
							<div class="data-value" id="gyro-y">0.00 °/s</div>
						</div>
						<div class="data-item">
							<div class="data-label">角速度 Z</div>
							<div class="data-value" id="gyro-z">0.00 °/s</div>
						</div>
					</div>
				</div>

				<div class="panel-section">
					<h2>📐 姿态角度</h2>
					<div class="sensor-data">
						<div class="data-item">
							<div class="data-label">俯仰角 (Pitch)</div>
							<div class="data-value" id="pitch-angle">0.00°</div>
						</div>
						<div class="data-item">
							<div class="data-label">滚转角 (Roll)</div>
							<div class="data-value" id="roll-angle">0.00°</div>
						</div>
						<div class="data-item">
							<div class="data-label">偏航角 (Yaw)</div>
							<div class="data-value" id="yaw-angle">0.00°</div>
						</div>
					</div>
				</div>


				<div class="panel-section" style="display: none;">
					<h2>🎚️ 传感器模拟控制</h2>

					<div class="sensor-controls">
						<div class="control-group">
							<h3>加速度控制</h3>
							<div class="slider-container">
								<div class="slider-label">
									<span>X轴</span>
									<span id="slider-accel-x-value">0.00 g</span>
								</div>
								<input type="range" id="slider-accel-x" min="-2" max="2" step="0.01" value="0">
							</div>

							<div class="slider-container">
								<div class="slider-label">
									<span>Y轴</span>
									<span id="slider-accel-y-value">0.00 g</span>
								</div>
								<input type="range" id="slider-accel-y" min="-2" max="2" step="0.01" value="0">
							</div>

							<div class="slider-container">
								<div class="slider-label">
									<span>Z轴</span>
									<span id="slider-accel-z-value">1.00 g</span>
								</div>
								<input type="range" id="slider-accel-z" min="-2" max="2" step="0.01" value="1">
							</div>
						</div>

						<div class="control-group">
							<h3>角速度控制</h3>
							<div class="slider-container">
								<div class="slider-label">
									<span>X轴</span>
									<span id="slider-gyro-x-value">0.00 °/s</span>
								</div>
								<input type="range" id="slider-gyro-x" min="-90" max="90" step="0.01" value="0">
							</div>

							<div class="slider-container">
								<div class="slider-label">
									<span>Y轴</span>
									<span id="slider-gyro-y-value">0.00 °/s</span>
								</div>
								<input type="range" id="slider-gyro-y" min="-90" max="90" step="0.01" value="0">
							</div>

							<div class="slider-container">
								<div class="slider-label">
									<span>Z轴</span>
									<span id="slider-gyro-z-value">0.00 °/s</span>
								</div>
								<input type="range" id="slider-gyro-z" min="-90" max="90" step="0.01" value="0">
							</div>
						</div>
					</div>

					<!-- <div class="controls">
						<button id="reset-btn">重置传感器</button>
						<button id="random-btn">随机数据</button>
						<button id="rotate-x-btn">X轴旋转</button>
						<button id="rotate-y-btn">Y轴旋转</button>
					</div> -->
				</div>



				<div class="panel-section" style="display: none;">
                <h2>💡 技术说明</h2>
                <div class="explanation">
                    <p>此演示模拟了MPU6050传感器（加速度计 + 陀螺仪）的工作原理：</p>
                    
                    <p>1. <span class="highlight">加速度计</span>测量线性加速度（包括重力）</p>
                    <div class="formula">
                        Pitch = arctan(Y / √(X² + Z²))<br>
                        Roll = arctan(X / √(Y² + Z²))
                    </div>
                    
                    <p>2. <span class="highlight">陀螺仪</span>测量角速度（旋转速率）</p>
                    <div class="formula">
                        Δ角度 = 角速度 × 时间间隔<br>
                        新角度 = 原角度 + Δ角度
                    </div>
                    
                    <p>3. <span class="highlight">姿态融合</span>结合加速度计和陀螺仪数据</p>
                    <div class="formula">
                        融合角度 = (0.98) × (陀螺仪角度) + (0.02) × (加速度计角度)
                    </div>
                    
                    <p>4. 立方体使用Three.js的欧拉角旋转表示姿态</p>
                </div>
            </div>
			</div>

			<div class="footer">
				数据由MPU6050采集的数据进行互补滤波算法进行姿态融合，偏航角由积分得到，仅供参考
			</div>
		</div>

		<script>
			// 初始化Three.js场景
			const scene = new THREE.Scene();
			scene.background = new THREE.Color(0x0a0a1a);
			scene.fog = new THREE.Fog(0x0a0a, 20, 100);

			const camera = new THREE.PerspectiveCamera(45, window.innerWidth / window.innerHeight, 0.1, 100);
			camera.position.z = 5;

			const renderer = new THREE.WebGLRenderer({
				antialias: true
			});
			renderer.setSize(document.getElementById('scene').offsetWidth, document.getElementById('scene').offsetHeight);
			renderer.setPixelRatio(window.devicePixelRatio);
			document.getElementById('scene').appendChild(renderer.domElement);

			// 创建立方体
			const geometry = new THREE.BoxGeometry(2, 2, 2);
			const edges = new THREE.EdgesGeometry(geometry);

			// 创建带边框的材质
			const materials = [
				new THREE.MeshBasicMaterial({
					color: 0xFF0000, //#FF0000
					transparent: true,
					opacity: 0.8
				}),
				new THREE.MeshBasicMaterial({
					color: 0x00FFFF, //#00FFFF
					transparent: true,
					opacity: 0.8
				}),
				new THREE.MeshBasicMaterial({
					color: 0x00FF00, //#00FF00
					transparent: true,
					opacity: 0.8
				}),
				new THREE.MeshBasicMaterial({
					color: 0xFF00FF, //#FF00FF
					transparent: true,
					opacity: 0.8
				}),
				new THREE.MeshBasicMaterial({
					color: 0x0000FF, //#0000FF
					transparent: true,
					opacity: 0.8
				}),
				new THREE.MeshBasicMaterial({
					color: 0xFFFF00, //#FFFF00
					transparent: true,
					opacity: 0.8
				})
			];

			// const color =new THREE.MeshBasicMaterial({
			// 	color:red,
			// });
			// const cube = new THREE.Mesh(geometry, color);
			const cube = new THREE.Mesh(geometry, materials);
			scene.add(cube);

			// 添加边框
			const lineMaterial = new THREE.LineBasicMaterial({
				color: 0xffffff,
				linewidth: 2
			});

			const wireframe = new THREE.LineSegments(edges, lineMaterial);
			cube.add(wireframe);

			// 添加坐标轴
			const axesHelper = new THREE.AxesHelper(9);
			scene.add(axesHelper);

			// 添加灯光
			// const ambientLight = new THREE.AmbientLight(0x404040);
			// scene.add(ambientLight);

			// const directionalLight = new THREE.DirectionalLight(0xffffff, 1);
			// directionalLight.position.set(5, 10, 7);
			// scene.add(directionalLight);

			// const pointLight = new THREE.PointLight(0xff0088, 1, 100);
			// pointLight.position.set(-5, -5, 5);
			// scene.add(pointLight);

			// 添加网格地板
			// const gridHelper = new THREE.GridHelper(20, 20, 0x444444, 0x222222);
			// gridHelper.position.y = -3;
			// scene.add(gridHelper);

			// 初始化传感器数据
			let sensorData = {
				accel: {
					x: 0,
					y: 0,
					z: 1
				}, // 默认重力加速度
				gyro: {
					x: 0,
					y: 0,
					z: 0
				}, // 角速度
				angles: {
					pitch: 0,
					roll: 0,
					yaw: 0
				} // 融合后的角度
			};

			// 获取DOM元素
			const sliderAccelX = document.getElementById('slider-accel-x');
			const sliderAccelY = document.getElementById('slider-accel-y');
			const sliderAccelZ = document.getElementById('slider-accel-z');

			const sliderGyroX = document.getElementById('slider-gyro-x');
			const sliderGyroY = document.getElementById('slider-gyro-y');
			const sliderGyroZ = document.getElementById('slider-gyro-z');

			// const resetBtn = document.getElementById('reset-btn');
			// const randomBtn = document.getElementById('random-btn');
			// const rotateXBtn = document.getElementById('rotate-x-btn');
			// const rotateYBtn = document.getElementById('rotate-y-btn');

			// 上一次更新时间
			let lastTime = 0;

			// 更新数据显示
			function updateSensorDisplay() {
				// 加速度数据显示
				document.getElementById('accel-x').textContent = sensorData.accel.x.toFixed(2) + ' g';
				document.getElementById('accel-y').textContent = sensorData.accel.y.toFixed(2) + ' g';
				document.getElementById('accel-z').textContent = sensorData.accel.z.toFixed(2) + ' g';

				document.getElementById('slider-accel-x-value').textContent = sensorData.accel.x.toFixed(2) + ' g';
				document.getElementById('slider-accel-y-value').textContent = sensorData.accel.y.toFixed(2) + ' g';
				document.getElementById('slider-accel-z-value').textContent = sensorData.accel.z.toFixed(2) + ' g';

				// 角速度数据显示
				document.getElementById('gyro-x').textContent = sensorData.gyro.x.toFixed(2) + ' °/s';
				document.getElementById('gyro-y').textContent = sensorData.gyro.y.toFixed(2) + ' °/s';
				document.getElementById('gyro-z').textContent = sensorData.gyro.z.toFixed(2) + ' °/s';

				document.getElementById('slider-gyro-x-value').textContent = sensorData.gyro.x.toFixed(2) + ' °/s';
				document.getElementById('slider-gyro-y-value').textContent = sensorData.gyro.y.toFixed(2) + ' °/s';
				document.getElementById('slider-gyro-z-value').textContent = sensorData.gyro.z.toFixed(2) + ' °/s';

				// 角度数据显示
				document.getElementById('pitch-angle').textContent = sensorData.angles.pitch.toFixed(2) + '°';
				document.getElementById('roll-angle').textContent = sensorData.angles.roll.toFixed(2) + '°';
				document.getElementById('yaw-angle').textContent = sensorData.angles.yaw.toFixed(2) + '°';
			}

			// 从加速度计算欧拉角
			function calculateAccelAngles(accel) {
				const {
					x,
					y,
					z
				} = accel;

				// 计算俯仰角 (Pitch) 和滚转角 (Roll)
				const pitch = -Math.atan2(y, Math.sqrt(x * x + z * z));
				const roll = Math.atan2(x, Math.sqrt(y * y + z * z));

				// 转换为角度
				return {
					pitch: THREE.MathUtils.radToDeg(pitch),
					roll: THREE.MathUtils.radToDeg(roll),
					yaw: 0 // 加速度计无法测量偏航角
				};
			}

			// 互补滤波融合角度
			function complementaryFilter(accelAngles, gyroData, dt, currentAngles) {
				// 陀螺仪数据积分
				var gyroPitch = currentAngles.pitch + gyroData.x * dt;
				var gyroRoll = currentAngles.roll + gyroData.y * dt;
				var gyroYaw = currentAngles.yaw + gyroData.z * dt;
				gyroYaw = (gyroYaw % 360);
				// 互补滤波融合 (加速度计权重0.02，陀螺仪权重0.98)
				const alpha = 0.1;
				return {
					pitch: (1 - alpha) * gyroPitch + alpha * accelAngles.pitch,
					roll: (1 - alpha) * gyroRoll + alpha * accelAngles.roll,
					yaw: gyroYaw // 偏航角完全由陀螺仪积分
				};
			}

			// 更新立方体姿态
			function updateCubeOrientation() {
				// 设置立方体旋转
				cube.rotation.z = THREE.MathUtils.degToRad(sensorData.angles.pitch);
				cube.rotation.x = THREE.MathUtils.degToRad(sensorData.angles.roll);
				cube.rotation.y = THREE.MathUtils.degToRad(sensorData.angles.yaw);
			}

			// 滑块事件监听
			sliderAccelX.addEventListener('input', function() {
				sensorData.accel.x = parseFloat(this.value);
				updateSensorDisplay();
			});

			sliderAccelY.addEventListener('input', function() {
				sensorData.accel.y = parseFloat(this.value);
				updateSensorDisplay();
			});

			sliderAccelZ.addEventListener('input', function() {
				sensorData.accel.z = parseFloat(this.value);
				updateSensorDisplay();
			});

			sliderGyroX.addEventListener('input', function() {
				sensorData.gyro.x = parseFloat(this.value);
				updateSensorDisplay();
			});

			sliderGyroY.addEventListener('input', function() {
				sensorData.gyro.y = parseFloat(this.value);
				updateSensorDisplay();
			});

			sliderGyroZ.addEventListener('input', function() {
				sensorData.gyro.z = parseFloat(this.value);
				updateSensorDisplay();
			});

			// 重置按钮
			// resetBtn.addEventListener('click', function() {
			// 	sensorData = {
			// 		accel: {
			// 			x: 0,
			// 			y: 0,
			// 			z: 1
			// 		},
			// 		gyro: {
			// 			x: 0,
			// 			y: 0,
			// 			z: 0
			// 		},
			// 		angles: {
			// 			pitch: 0,
			// 			roll: 0,
			// 			yaw: 0
			// 		}
			// 	};

			// 	sliderAccelX.value = 0;
			// 	sliderAccelY.value = 0;
			// 	sliderAccelZ.value = 1;

			// 	sliderGyroX.value = 0;
			// 	sliderGyroY.value = 0;
			// 	sliderGyroZ.value = 0;

			// 	updateSensorDisplay();
			// 	updateCubeOrientation();
			// }
			// );

			function getMPU6050() {
				//使用$.ajax()发送异步请求
				$.ajax({
					url: "https://apis.bemfa.com/va/getmsg", // 请求路径
					type: "GET", //请求方式
					data: {
						uid: "60ce8437cee20782e7355a16e6bb6a39",
						type: 3, //3 为TCP 1为mqtt
						topic: 'MPU6050',
						num: 1
					},
					success: function(message) {
						// alert(data);
						// let box1 = document.querySelector("#box1");
						var res = JSON.parse(message);
						// box1.innerHTML = "消息: " + res.data[0].msg + '  ' + res.data[0].time;
						// console.log(res);
						// console.log(res.data[0].msg);

						let input = res.data[0].msg + "#aX_aY_aZ_gX_gY_gZ#";
						// const input = "#-0.23#0.46#-0.98#-4.489#-1.87#-0.8#aX_aY_aZ_gX_gY_gZ#";

						// 1. 分割并过滤空值
						const parts = input.split('#').filter(Boolean); // Boolean过滤空字符串

						// 2. 提取数据（前6个是数值，第7个是标签）
						const [aX, aY, aZ, gX, gY, gZ, labels] = parts;
						// console.log(parts);
						// 3. 转换数值类型并解析标签
						// sensorData = {
						// 	accel: {
						// 		x: Number(aX),
						// 		y: Number(aY),
						// 		z: Number(aZ)
						// 	},
						// 	gyro: {
						// 		x: Number(gX),
						// 		y: Number(gY),
						// 		z: Number(gZ)
						// 	},
						// 	angles: {
						// 		pitch: 0,
						// 		roll: 0,
						// 		yaw: 0
						// 	}
						// };

						sensorData.accel = {
							x: Number(aX),
							y: Number(aY),
							z: Number(aZ)
						};

						sensorData.gyro = {
							x: Number(gX),
							y: Number(gY),
							z: Number(gZ)
						};

						const result = {
							accelerometer: {
								x: aX,
								y: aY,
								z: aZ
							},
							gyroscope: {
								x: gX,
								y: gY,
								z: gZ
							},
							sensorLabels: labels.split('_')
						};

						sliderAccelX.value = sensorData.accel.x;
						sliderAccelY.value = sensorData.accel.y;
						sliderAccelZ.value = sensorData.accel.z;

						sliderGyroX.value = sensorData.gyro.x;
						sliderGyroY.value = sensorData.gyro.y;
						sliderGyroZ.value = sensorData.gyro.z;

						updateSensorDisplay();

						console.log(result);

					}, //响应成功后的回调函数
					error: function() {
						alert("出错啦...")
					}, //表示如果请求响应出现错误，会执行的回调函数
					dataType: "text" //设置接受到的响应数据的格式
				});
			}
			getMPU6050();

			setInterval(() => {
				getMPU6050();
			}, 500); // 每5秒更新一次

			// // 随机数据按钮
			// randomBtn.addEventListener('click', function() {
			// 	sensorData.accel = {
			// 		x: (Math.random() * 4 - 2),
			// 		y: (Math.random() * 4 - 2),
			// 		z: (Math.random() * 1 + 0.5)
			// 	};

			// 	sensorData.gyro = {
			// 		x: (Math.random() * 360 - 180),
			// 		y: (Math.random() * 360 - 180),
			// 		z: (Math.random() * 360 - 180)
			// 	};

			// 	sliderAccelX.value = sensorData.accel.x;
			// 	sliderAccelY.value = sensorData.accel.y;
			// 	sliderAccelZ.value = sensorData.accel.z;

			// 	sliderGyroX.value = sensorData.gyro.x;
			// 	sliderGyroY.value = sensorData.gyro.y;
			// 	sliderGyroZ.value = sensorData.gyro.z;

			// 	updateSensorDisplay();
			// });

			// // 旋转按钮
			// rotateXBtn.addEventListener('click', function() {
			// 	sensorData.gyro.x = 90;
			// 	sliderGyroX.value = 90;
			// 	updateSensorDisplay();
			// });

			// rotateYBtn.addEventListener('click', function() {
			// 	sensorData.gyro.y = 90;
			// 	sliderGyroY.value = 90;
			// 	updateSensorDisplay();
			// });

			// 初始化显示
			updateSensorDisplay();
			updateCubeOrientation();

			// 动画循环
			function animate(timestamp) {
				requestAnimationFrame(animate);

				// 计算时间间隔（秒）
				const dt = lastTime ? (timestamp - lastTime) / 1000 : 0.016;
				lastTime = timestamp;

				// 从加速度计计算角度
				const accelAngles = calculateAccelAngles(sensorData.accel);

				// 使用互补滤波融合角度
				sensorData.angles = complementaryFilter(
					accelAngles,
					sensorData.gyro,
					dt,
					sensorData.angles
				);

				// 更新立方体姿态
				updateCubeOrientation();

				// 更新数据显示
				updateSensorDisplay();

				renderer.render(scene, camera);
			}

			camera.aspect = document.getElementById('scene').offsetWidth / document.getElementById('scene')
				.offsetHeight;
			camera.updateProjectionMatrix();
			renderer.setSize(document.getElementById('scene').offsetWidth, document.getElementById('scene')
				.offsetHeight);

			// 响应窗口大小变化
			window.addEventListener('resize', function() {
				camera.aspect = document.getElementById('scene').offsetWidth / document.getElementById('scene')
					.offsetHeight;
				camera.updateProjectionMatrix();
				renderer.setSize(document.getElementById('scene').offsetWidth, document.getElementById('scene')
					.offsetHeight);
			});

			animate();
		</script>
	</body>
</html>